<template>
  <div class="car">
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click.native="back">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="goLogin">
      <span style="line-height: 0.62rem;font-size: 0.16rem;">登录后享受更多优惠</span>
      <span style="line-height: 0.62rem;color: #999A99">去登陆></span>
    </div>
    <div class="con" v-if="flag=0">
        <span style="color: #B2B8C0;font-size: 0.15rem">购物车还是空的</span>
        <p @click="home">去逛逛</p>
    </div>
    <div v-else class="con1">
      <ul>
        <li v-for="(item,index) in $store.state.shop" :key="index">
          <img :src="item.img" alt="">
          <div style="margin-left: 0.1rem">
            <p style="font-size: 0.15rem;margin-bottom: 0.05rem;line-height: 0.3rem">{{ item.name }}</p>
            <p style="color: #ABA6A0;margin-bottom: 0.07rem">￥ {{ item.price * $store.state.num[index] }}</p>
            <van-stepper @plus="plus(index)" @minus="minus(index)" v-model="$store.state.num[index]" />
          </div>
        </li>
      </ul>
    </div>
    <div class="like">
      <p style="text-align: center;padding-top: 0.2rem;box-sizing: border-box;font-size: 0.15rem;color: #FF6500">猜你喜欢</p>
      <p style="text-align: center;color: #939393;margin-bottom: 0.2rem">实时推荐你的心心念念</p>
      <p></p>
      <ul>
        <li v-for="(item,index) in $store.state.shop" :key="index">
          <img :src="item.img" alt="">
          <div style="padding-left: 0.1rem;">
            <p class="title">{{ item.name }}</p>
            <p class="text">{{ item.content }}</p>
            <p class="price">￥ {{ item.price }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="flooter">
      <van-submit-bar :price="$store.state.count" button-text="提交订单" v-if="flag=1" />
    </div>
  </div>
</template>

<script>
import { cardata } from '../../api'
export default {
  name: 'Car',
  data () {
    return {
      carArr: [],
      carcon: [],
      flag: 1,
      value: 1
    }
  },
  components: {
  },
  methods: {
    data () {
      cardata().then(res => {
        this.$store.state.shop = res
        for (var i = 0; i < res.length; i++) {
          this.$store.state.count = (res[i].price * this.$store.state.num[i]) * 100
        }
      })
    },
    home () {
      this.$router.push('/home')
    },
    plus (index) {
      this.$store.state.num[index]++
      this.$store.commit('add', Number(this.$store.state.shop[index].price) * 100)
      console.log(index)
    },
    minus (index) {
      this.$store.state.num[index]--
      this.$store.commit('min', Number(this.$store.state.shop[index].price) * 100)
      console.log(this.$store.state.shop[index].price)
      console.log(index)
    },
    // 返回上一页
    back () {
      console.log(1)
      this.$router.back()
    }
  },
  created () {
    this.data()
  }
}
</script>

<style scoped>
  .car{
    width: 100vw;
    padding-bottom: 0.44rem;
  }
  .car >>> .van-nav-bar{
    background: #F2F2F2!important;
  }
  .car >>> .van-nav-bar__title{
    color: #666666;
  }
  .goLogin{
    width: 100%;
    height: 0.62rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 0.28rem;
    box-sizing: border-box;
  }
  .con{
    width: 100%;
    height: 0.65rem;
    background: #EBEBEB;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .con1{
    width: 100%;
  }
  .con p{
    width: 0.65rem;
    height: 0.21rem;
    border: 1px solid #CACACA;
    line-height: 0.20rem;
    text-align: center;
    color: #28212B;
    margin-left: 0.1rem;
  }
  .like{
    width: 100%;
    overflow-y: scroll;
  }
  .like ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .like ul li{
    width: 50%;
  }
  .like ul li img{
    width: 100%;
    height: 1.74rem;
    margin-bottom: 0.1rem;
  }
  .title{
    font-size: 0.16rem;
  }
  .text{
    color: #B3B3AE;
    margin-bottom: 0.07rem;
  }
  .price{
    color: #EB6962;
    margin-bottom: 0.07rem;
  }
  .con1 li{
    width: 100%;
    height: 1.1rem;
    padding: 0 0.2rem;
    box-sizing: border-box;
    display: flex;
  }
  .con1 img{
    width: 0.87rem;
    height: 0.87rem;
    border-radius: 0.06rem;
  }
  .flooter{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 999;
  }
</style>
